import { LikeOutlined, DislikeOutlined } from "@ant-design/icons";

type LikeCounterProps = {
  likeCount: number;
  incrementCount: () => void;
  decrementCount: () => void;
};
const LikeCounter = ({
  likeCount,
  incrementCount,
  decrementCount,
}: LikeCounterProps) => {
  const handleIncrement = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    incrementCount();
  };

  const handleDecrement = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    decrementCount();
  };
  return (
    <div className="p-2 border rounded-lg w-80 flex justify-between select-none">
      <div>点赞数：{likeCount}</div>
      <div>
        <span className="mx-2">
          <LikeOutlined style={{ color: "red" }} onClick={handleIncrement} />
        </span>
        <span className="mx-2">
          <DislikeOutlined
            style={{ color: "gray" }}
            onClick={handleDecrement}
          />
        </span>
      </div>
    </div>
  );
};

export default LikeCounter;
